<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站登录/注册</title>

</head>
<body>

<div id="body">
    <!-- 触发按钮 -->
    <button id="showLoginModal" style="padding: 10px 20px; background: #00a1d6; color: white; border: none; border-radius: 4px; cursor: pointer;">
        登录/注册
    </button>

    <!-- 登录弹窗 -->
    <div class="modal-overlay hidden" id="loginModal">
        <div class="login-modal">


            <!-- 左侧二维码部分 -->
            <div class="qr-section">
                <div class="login-close" id="closeLoginModal">×</div>
                <div class="qr-code">
                    <img src="https://via.placeholder.com/180" alt="扫码登录">
                </div>
                <div class="qr-text">
                    请使用 哔哩哔哩客户端扫码登录<br>或扫码下载APP
                </div>
            </div>

            <!-- 右侧登录表单部分 -->
            <div class="login-section">
                <!-- 登录方式切换 -->
                <div class="login-header">
                    <div class="login-tab active" data-tab="password">密码登录</div>
                    <div class="login-tab" data-tab="sms">短信登录</div>
                </div>

                <!-- 密码登录表单 -->
                <div class="login-form" id="passwordLogin">
                    <div class="form-group">
                        <label class="form-label">账号</label>
                        <input type="text" class="form-input" placeholder="请输入账号">
                    </div>
                    <div class="form-group">
                        <label class="form-label">密码</label>
                        <div class="password-group">
                            <input type="password" class="form-input" placeholder="请输入密码" id="passwordInput">
                            <span class="toggle-password" id="togglePassword">显示</span>
                        </div>
                    </div>
                    <div class="forgot-password">
                        <a href="#">忘记密码？</a>
                    </div>
                    <button class="login-btn">登录</button>
                    <div class="register-link">
                        <a href="#" id="switchToRegister">注册</a>
                    </div>
                    <!-- <div class="other-login">
                        其他方式登录
                    </div>
                    <div class="social-login">
                        <div class="social-icon">微</div>
                        <div class="social-icon">微</div>
                        <div class="social-icon">Q</div>
                    </div>
                    <div class="agreement">
                        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号<br>
                        登录或完成注册即代表你同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
                    </div> -->
                </div>

                <!-- 短信登录表单 -->
                <div class="login-form hidden" id="smsLogin">
                    <div class="phone-group">
                        <div class="phone-prefix">
                            <select>
                                <option>+86</option>
                            </select>
                        </div>
                        <input type="text" class="form-input" placeholder="请输入手机号">
                    </div>
                    <div class="code-group">
                        <input type="text" class="form-input" placeholder="请输入验证码">
                        <button class="get-code-btn">获取验证码</button>
                    </div>
                    <button class="login-btn">登录/注册</button>
                    <div class="register-link">
                        <a href="#" id="switchToRegister2">注册</a>
                    </div>
                    <!-- <div class="other-login">
                        其他方式登录
                    </div>
                    <div class="social-login">
                        <div class="social-icon">微</div>
                        <div class="social-icon">微</div>
                        <div class="social-icon">Q</div>
                    </div>
                    <div class="agreement">
                        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号<br>
                        登录或完成注册即代表你同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
                    </div> -->
                </div>

                <!-- 注册表单 -->
                <div class="login-form hidden" id="registerForm">
                    <div class="form-group">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-input" placeholder="请输入邮箱">
                    </div>
                    <div class="code-group">
                        <input type="text" class="form-input" placeholder="请输入验证码">
                        <button class="get-code-btn">获取验证码</button>
                    </div>
                    <button class="login-btn">注册</button>
                    <div class="register-link">
                        <a href="#" id="switchToLogin">已有账号？立即登录</a>
                    </div>
                    <!-- <div class="other-login">
                        其他方式登录
                    </div>
                    <div class="social-login">
                        <div class="social-icon">微</div>
                        <div class="social-icon">微</div>
                        <div class="social-icon">Q</div>
                    </div>
                    <div class="agreement">
                        未注册过哔哩哔哩的手机号，我们将自动帮你注册账号<br>
                        登录或完成注册即代表你同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>


    <script>
        // 显示/隐藏弹窗
        document.getElementById('showLoginModal').addEventListener('click', function() {
            document.getElementById('loginModal').classList.remove('hidden');
        });
        
        document.getElementById('closeLoginModal').addEventListener('click', function() {
            document.getElementById('loginModal').classList.add('hidden');
        });
        
        // 密码显示/隐藏切换
        const passwordInput = document.getElementById('passwordInput');
        const togglePassword = document.getElementById('togglePassword');
        
        togglePassword.addEventListener('click', function() {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                togglePassword.textContent = '隐藏';
            } else {
                passwordInput.type = 'password';
                togglePassword.textContent = '显示';
            }
        });
        
        // 登录方式切换
        const tabs = document.querySelectorAll('.login-tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                document.getElementById('passwordLogin').classList.add('hidden');
                document.getElementById('smsLogin').classList.add('hidden');
                
                if (this.dataset.tab === 'password') {
                    document.getElementById('passwordLogin').classList.remove('hidden');
                } else {
                    document.getElementById('smsLogin').classList.remove('hidden');
                }
            });
        });
        
        // 切换到注册表单
        document.getElementById('switchToRegister').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('passwordLogin').classList.add('hidden');
            document.getElementById('smsLogin').classList.add('hidden');
            document.getElementById('registerForm').classList.remove('hidden');
            
            // 更新tab状态
            tabs.forEach(t => t.classList.remove('active'));
        });
        
        document.getElementById('switchToRegister2').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('passwordLogin').classList.add('hidden');
            document.getElementById('smsLogin').classList.add('hidden');
            document.getElementById('registerForm').classList.remove('hidden');
            
            // 更新tab状态
            tabs.forEach(t => t.classList.remove('active'));
        });
        
        // 切换回登录表单
        document.getElementById('switchToLogin').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('registerForm').classList.add('hidden');
            document.getElementById('passwordLogin').classList.remove('hidden');
            
            // 更新tab状态
            tabs[0].classList.add('active');
            tabs[1].classList.remove('active');
        });
    </script>
</body>
</html>